<template>
  <div class="icon-warp" :style="[bgStyle, isRadius]">
    <span class="iconfont" :style="{ fontSize: fontSize }" v-html="icon" />
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: '2.396vw'
    },
    fontSize: {
      type: String,
      default: '1.198vw'
    },
    isGradient: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: '&#xe686;'
    },
    shape: {
      type: String,
      default: 'circle' // circle 圆形   square  方形
    },
    bgColor: {
      type: String,
      default: '#f6bf00'
    },
    gradColor: {
      type: Array,
      default: () => ['#ff00ff', '#9774ff']
    }
  },
  computed: {
    bgStyle() {
      let style
      if (this.isGradient) {
        // 图片渐变
        style = {
          width: this.size,
          height: this.size,
          backgroundImage: `linear-gradient(-40deg, ${this.gradColor[0]} 0%, ${this.gradColor[1]} 100%), linear-gradient(	#fba74c, 	#fba74c)`,
          backgroundBlendMode: `normal, normal`
        }
      } else {
        style = {
          width: this.size,
          height: this.size,
          backgroundColor: this.bgColor,
          boxShadow: `0vw 0vw 0.313vw 0vw rgba($color: ${this.bgColor}, $alpha: 0.8);`
        }
      }
      return style
    },
    isRadius() {
      let style
      if (this.shape === 'circle') {
        style = {
          borderRadius: '50%'
        }
      } else {
        style = {
          borderRadius: '5px'
        }
      }
      return style
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-warp {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
</style>
